import { Icon } from "antd";
import * as React from "react";
import style from "./style.module.less";
// import {withRouter} from "react-router-dom";
import {connect} from "react-redux";

class HeaderCustom extends React.Component<any, any> {
  constructor(props) {
    super(props);
  }

  public handleCollapse = e => {
    e && e.preventDefault();
    this.props.onCollapse(!this.props.collapsed);
  };
  public render() {
    const { /* session, */handleLogout } = this.props;
    return (
      <div className={style.header}>
        <Icon
          className={style.icon}
          type={this.props.collapsed ? "menu-unfold" : "menu-fold"}
          onClick={this.handleCollapse}
        />
        <Icon className={style.icon} type="logout" style={{ float: "right" }} onClick={handleLogout}/>
        <div className={style.userName}>
          <Icon className={style.icon} type="user" />
          {/*<span>{session.name}</span>*/}
        </div>
        <Icon
          className={style.icon}
          type="question-circle-o"
          style={{ float: "right" }}
        />
      </div>
    );
  }
}

const mapStateToProps = (store: any) => ({
    session: store.session
});

export default connect(mapStateToProps)(HeaderCustom);